<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>赛事竞猜</title>
    <meta name="spm_prefix" content="333.1111">
    <meta name="description" content="">
    <meta name="keywords"
          content="">
    <link rel="stylesheet" href="./bilibili_files/font_662745_uljqqs8v4mj.css">
    <link rel="stylesheet" href="./bilibili_files/map.css">
    <link rel="stylesheet" href="./bilibili_files/light_u.css">
    <link id="__css-map__" rel="stylesheet" href="./bilibili_files/light.css">
    <link rel="stylesheet" type="text/css"
          href="./bilibili_files/game-pc.4180967d9c7d05633bdc.css">
    <link rel="stylesheet" type="text/css"
          href="./bilibili_files/game-pc.2f4fa8a9926043578541.css">
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/login-starter/js/login.js"></script>
    <link rel="stylesheet" href="/login-starter/css/style.css">
</head>
<body class="bottom-filling">
<div id="app">
    <login style="margin-top: 40px" ref="lg" @logined="onLogin"></login>
    <div id="server-game-app" class="bili-game-local small"><!---->
        <div style="padding-top: 32px;"></div>
        <div data-v-e5d7b696="" class="competition-home">
            <div data-v-e5d7b696="" class="container-box">
                <div data-v-e5d7b696="" class="container-left">
                    <div data-v-e5d7b696="" class="data-picker-box clearfix">
                        <div data-v-e5d7b696="" class="time-all active" @click="selectMatchesWithTeams()">
                            <span data-v-e5d7b696="">全部</span>
                            <span data-v-e5d7b696="">时间</span>
                        </div>
                        <div class="block">
                            <span class="demonstration">选择日期</span>
                            <el-date-picker
                                    v-model="value1"
                                    type="date"
                                    placeholder="选择日期" value-format="yyyy-MM-dd"
                                    @change="selectMatchByDate()">

                            </el-date-picker>
                        </div>
                    </div>
                    <ul data-v-e5d7b696="" class="competition-list">
                        <li data-v-e5d7b696="" v-for="match in matches">
                            <div data-v-5478a284="" data-v-e5d7b696="" class="competition-title">
                                <div data-v-5478a284="" class="competition-title-between">
                                    <div data-v-5478a284="" class="logo">
                                        <div data-v-5478a284="" class="lazy-img">
                                            <img alt="" src="">
                                        </div>
                                    </div>
                                    <div data-v-5478a284="" class="competition-title-season">2023LPL夏季赛</div>
                                </div>
                                <div data-v-5478a284="" class="competition-title-center">
                                    <div data-v-5478a284="" class="logo">
                                        <div data-v-5478a284="" class="lazy-img">
                                            <img alt="" style="width: 50px"
                                                 :src="match.ateams.icon">
                                        </div>
                                    </div>
                                    <div data-v-5478a284="" class="team-name">{{match.awayTeamName}}</div>
                                    <div data-v-5478a284="" class="team-vs">VS</div>
                                    <div data-v-5478a284="" class="team-name">{{match.homeTeamName}}</div>
                                    <div data-v-5478a284="" class="logo">
                                        <div data-v-5478a284="" class="lazy-img">
                                            <img alt="" style="width: 50px"
                                                 :src="match.hteams.icon">
                                        </div>
                                    </div>
                                </div>
                                <div data-v-5478a284="" class="competition-title-between">
                                    <p data-v-5478a284="">
                                        <span data-v-5478a284="">{{match.date}} {{match.time}}</span>
                                </p></div>
                            </div>
                            <ul data-v-e5d7b696="" class="competition-options">
                                <li data-v-e5d7b696="">
                                    <div data-v-3d7e7b9c="" data-v-e5d7b696="" class="part-title">
                                        <h3 data-v-3d7e7b9c="">{{match.awayTeamName}} vs {{match.homeTeamName}} 的胜者是？</h3>
                                        <div data-v-3d7e7b9c="" class="clear-fix">
                                            <div data-v-3d7e7b9c="">
                                                <div data-v-22600b9b="" data-v-e5d7b696="" class="part-title-menu"
                                                     data-v-3d7e7b9c="">
                                                    <p data-v-22600b9b="">
                                                    <div data-v-e5d7b696="" data-v-22600b9b=""
                                                         class="competition-menu">
                                                    <span data-v-e5d7b696=""
                                                          data-v-22600b9b="">截止2023-08-12 16:50
                                                    </span>
                                                    <span data-v-e5d7b696="" data-v-22600b9b="" class="icon-menu">
                                                    </span>
                                                </div>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div data-v-e5d7b696="" class="competition-ul">
                                        <div data-v-e5d7b696=""
                                             @click="dialogFormVisible=true;
                                         bets.teamId=match.ateams.teamId;
                                         teamName=match.awayTeamName;
                                         bets.matchId=match.matchId;">
                                            <div data-v-3c2f6f3b="" data-v-e5d7b696="" class="competition-option"
                                                 style="z-index: 0;"><!---->
                                                <div data-v-3c2f6f3b="" class="competition-option-content isable">
                                                    <div data-v-3c2f6f3b="" title="JDG" class="team-name" >{{match.awayTeamName}}</div>
                                                    <span data-v-3c2f6f3b="" class="icon-right"
                                                          style="display: none;"></span>

                                                </div>
                                            </div>
                                        </div>
                                        <div data-v-e5d7b696=""
                                             @click="dialogFormVisible2=true;
                                             bets.teamId=match.ateams.teamId;
                                             teamName=match.homeTeamName;
                                             bets.matchId=match.matchId;selectMatchById()">
                                            <div data-v-3c2f6f3b="" data-v-e5d7b696="" class="competition-option"
                                                 style="z-index: 0;"><!---->
                                                <div data-v-3c2f6f3b="" class="competition-option-content isable">
                                                    <div data-v-3c2f6f3b="" :title="match.homeTeamName" class="team-name">{{match.homeTeamName}}</div>
                                                    <span data-v-3c2f6f3b="" class="icon-right"
                                                          style="display: none;"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div data-v-e5d7b696="" class="container-right">
                    <div data-v-9fcfe9de="" data-v-e5d7b696="" class="competition-user">
                        <div data-v-9fcfe9de="" class="competition-user-money">
                            <div data-v-9fcfe9de="" class="competition-user-logo">
                                <div data-v-21e76991="" data-v-9fcfe9de="" class="user-logo"
                                     style="width: 48px; height: 48px;">
                                    <div data-v-21e76991="" class="lazy-img">
                                        <img alt=""
                                             src="">
                                    </div>
                                </div>
                            </div>
                            <div data-v-9fcfe9de="" class="competition-user-info">
                                <div data-v-9fcfe9de="" class="competition-user-nickname"><p data-v-9fcfe9de="">
                                   {{user.username}}
                                </p></div>
                                <div data-v-9fcfe9de="" class="competition-user-coin">
                                    <div data-v-9fcfe9de=""><span data-v-9fcfe9de="" class="icon-coin"></span> <i
                                            data-v-9fcfe9de="">{{user.score}}</i></div>
                                </div>
                            </div>
                        </div>
                        <ul data-v-9fcfe9de="" class="competition-score">
                            <li data-v-9fcfe9de=""><p data-v-9fcfe9de="">总场次</p> <span data-v-9fcfe9de="">14</span></li>
                            <li data-v-9fcfe9de=""><p data-v-9fcfe9de="">胜场</p> <span data-v-9fcfe9de="">7</span></li>
                            <li data-v-9fcfe9de=""><p data-v-9fcfe9de="">胜率</p> <span data-v-9fcfe9de="">50%</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog title="赛事预测" :visible.sync="dialogFormVisible">
        <el-form :model="bets">
            <el-form-item label="预测获胜队伍" :label-width="formLabelWidth">
                <el-input autocomplete="off" v-model="teamName" style="width: 200px">{{teamName}}</el-input>
            </el-form-item>
            <el-form-item label="下注积分" :label-width="formLabelWidth">
                <el-input-number v-model="bets.amount" :step="10"></el-input-number>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth">
                奖励率： <span>{{aodds}}</span>&nbsp;&nbsp; 胜利可获得的积分：<span>{{aodds*bets.amount}}</span>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;addBets()">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="赛事预测" :visible.sync="dialogFormVisible2">
        <el-form :model="bets">
            <el-form-item label="预测获胜队伍" :label-width="formLabelWidth">
                <el-input autocomplete="off" v-model="teamName" style="width: 200px">{{teamName}}</el-input>
            </el-form-item>
            <el-form-item label="下注积分" :label-width="formLabelWidth">
                <el-input-number v-model="bets.amount" :step="10"></el-input-number>
            </el-form-item>
            <el-form-item label="" :label-width="formLabelWidth">
                奖励率： <span>{{hodds}}</span>&nbsp;&nbsp; 胜利可获得的积分：<span>{{hodds*bets.amount}}</span>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible2 = false;addBets()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            user:{},
            value1: '',
            matches:{},
            dialogFormVisible:false,
            dialogFormVisible2:false,
            areword:0,
            hreword:0,
            teamName:"",
            userReword:0,
            aodds:0,
            hodds:0,
            bets: {
                matchId:"",
                teamId:"",
                userId:1,
                amount:"",
            },
            formLabelWidth: '120px'
        },
        created(){
            this.selectMatchesWithTeams();
        },
        methods:{
            onLogin(user){
                this.user=user;
                this.$emit("logined",user);
                console.log(this.user);
            },
            selectMatchById() {
                 axios.post("/yjh-match/yjhmatch/matches/selectMatchById?mid="+this.bets.matchId).then(res=>{
                     this.areword=res.data.data[0].areword;
                     this.hreword=res.data.data[0].hreword;
                     console.log(this.areword)
                     this.calculateOdds();
                 })
            },
            calculateOdds(){
                this.aodds=this.areword/(this.areword+this.hreword)+1;
                this.hodds=this.hreword/(this.areword+this.hreword)+1;
            },
            addBets(){
                axios.post("/yjh-match/bets/bets/addBets",this.bets).then(res=>{
                    if(res.data.code){
                        this.$message(res.data.msg);
                    }
                })
            },
            selectMatchesWithTeams(){
                axios.get("/yjh-match/yjhmatch/matches/selectMatchesWithTeams").then(res=>{
                    this.value1="";
                    this.matches=res.data.data;
                    console.log(this.matches)
                })
            },
            selectMatchByDate(){
                console.log(this.value1)
                axios.post("/yjh-match/yjhmatch/matches/selectMatchByDate?date="+this.value1).then(res=>{
                    this.matches=res.data.data;
                    this.$forceUpdate();
                    console.log(this.matches);
                })
            }
        }
    })
</script>
</body>
</html>